import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import { Radio } from 'antd';
import TabTitle from '@/components/TabTitle/TabTitle';
import Obtain from './components/Obtain';
// import Exchange from './components/Exchange';
import './Service.less'

@inject('rootStore') @observer
class Service extends Component {
  @observable tabKey = '0';

  componentDidMount() {

  }

  tabKeyOnChange = (e) => {
    this.tabKey = e.target.value;
  }

  render() {
    const breadCrumb = ['Integration', 'Statistics', 'Detail']
    const detailsData = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
      }]
    }

    return (
      <div className="news-list">
        <TabTitle
          showTabbar={false}
          title="Detail"
          breadCrumb={breadCrumb} />
        <div className="page-content mt144 service">
         <div className="service-header">
           <div className="left-header">
             <img
               className="avatar"
               alt=""
               src="https://blog-1251625630.cos.ap-guangzhou.myqcloud.com/head.jpg" />
              <div className="dels">
                <div className="name">James.zxy</div>
                <div className="desc">lo250777771</div>
              </div>
           </div>
           <div className="right-header">
             <div className="right-header-item">
               <div className="amount">100,00</div>
               <div className="desc">Integral</div>
             </div>
             <div className="right-header-item">
               <div className="amount">100,00</div>
               <div className="desc">Integral</div>
             </div>
           </div>
         </div>
         <div className="chart">
           <ReactEcharts
             option={detailsData}
             style={{height: '420px', width: '100%'}}
             className='react_for_echarts' />
         </div>
         <div className="record">
           <div className="btn-group">
             <Radio.Group
               value={this.tabKey}
               onChange={this.tabKeyOnChange}
               buttonStyle="solid">
                <Radio.Button value="0">Obtain</Radio.Button>
                <Radio.Button value="1">Exchange</Radio.Button>
              </Radio.Group>
           </div>
           <div className="list-table">
             <Obtain />
           </div>
         </div>
        </div>
      </div>
    )
  }
}

export default Service;
